
<!-- saved from url=(0046)http://127.0.0.1:8020/lessons_js_12/index.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=GBK">
		<title></title>
		<style type="text/css">
			.box{
				width: 200px;
				height: 200px;
				border: 1px solid red;
			}
			.box1{
					width: 100px;
				height: 100px;
				border: 1px solid green;
				margin: 20px;

			}
		</style>
	</head>
	<body>
		<div class="box"><div class="box1"></div></div>
	
	<script type="text/javascript">
		
		var box = document.querySelector('.box');
		var box1= document.querySelector('.box1');

		
		box1.addEventListener('click',click,false);
		box.addEventListener('click',click,false);
		box.addEventListener('mouseover',over,false);
		box1.addEventListener('mouseover',over,false);

		
		function click(evt){
			evt = evt || window;
			alert('click');
			
		}
		
		function over(evt){
			evt = evt || window;
			alert('over');
			evt.stopImmediatePropagation();
		}
		
		
		
	</script>
</body></html>